<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <!--<link rel="stylesheet/less" type="text/css" href="less.less" />-->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
        function browserRedirect () {
            var sUserAgent = navigator.userAgent.toLowerCase()
            var bIsIpad = sUserAgent.match(/ipad/i) === 'ipad'
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) === 'iphone os'
            var bIsMidp = sUserAgent.match(/midp/i) === 'midp'
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === 'rv:1.2.3.4'
            var bIsUc = sUserAgent.match(/ucweb/i) === 'ucweb'
            var bIsAndroid = sUserAgent.match(/android/i) === 'android'
            var bIsCE = sUserAgent.match(/windows ce/i) === 'windows ce'
            var bIsWM = sUserAgent.match(/windows mobile/i) === 'windows mobile'
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                return 'phone'
            } else {
                return 'pc'
            }
        }
        setRem()
        window.addEventListener('orientationchange', setRem)
        window.addEventListener('resize', setRem)
        window.addEventListener('resize', setRem)
        function setRem () {
            var html = document.querySelector('html')
            var app = document.getElementById("app");
            var iframe = document.getElementById("iframe");
            if (browserRedirect() === 'pc') {
                if (window.screen.width > 1360) {
                    html.fontSize=750/100+"px"
                }
            }

        }
    </script>
<body>
<style>
    *{
        margin:0;
        padding:0;
    }

    html,body{
        width:100%;
        height:100%;
        position:relative;
        font-size:28px;
        background: #000000;
    }
    #app{
        height:100%;


        margin:0 auto;

    }

    @media screen and (min-width: 1200px) {
        #app{
            width:750px;
        }
    }


    #showTime{

        text-align:center;
        font-size:1rem;
        color: #ffae28;

    }
    #showTime >li{
        float:left;
        list-style:none;
        margin-right:0.2rem;
    }

    [class*="flex-box"]{
        width:100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    [class*="flex-ibox"]{
        display: inline-flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        vertical-align: bottom;
    }
    [class*="flex-box"].flex-nowrap,[class*="flex-ibox"].flex-nowrap{
        flex-wrap: nowrap;
    }
    [class*="flex-box"].flex-wrap,[class*="flex-ibox"].flex-wrap{
        flex-wrap: wrap;
    }
    .flex-box-baseline{
        align-items: baseline;
    }
    .flex-box-rs, .flex-ibox-rs{
        flex-direction: row;
        justify-content: flex-start;
        align-content: flex-start;
    }
    .flex-box-re, .flex-ibox-re{
        flex-direction: row;
        justify-content: flex-end;
        align-content: flex-start;
    }
    .flex-box-rc,.flex-ibox-rc{
        flex-direction: row;
        justify-content: center;
        align-content: flex-start;
    }
    .flex-box-rcc, .flex-ibox-rcc{
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .flex-box-rb, .flex-ibox-rb{
        flex-direction: row;
        justify-content: space-between;
        align-content: flex-start;
    }
    .flex-box-ra, .flex-ibox-ra{
        flex-direction: row;
        justify-content: space-around;
        align-content: flex-start;
    }


    .flex-box-cs, .flex-ibox-cs{
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
    }
    .flex-box-ce,.flex-ibox-ce{
        flex-direction: column;
        justify-content: flex-end;
        align-content: flex-start;
    }
    .flex-box-cc, .flex-ibox-cc{
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    .flex-box-cb,.flex-ibox-cb{
        flex-direction: column;
        justify-content: space-between;
        align-content: flex-start;
    }
    .flex-box-ca, .flex-ibox-ca{
        flex-direction: column;
        justify-content: space-around;
        align-content: flex-start;
    }
    .flex-box-ccc, .flex-ibox-ccc{
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }

    .btn{
        display:inline-block;
        background:#00B7FF;
        color:#fff;
        cursor:pointer;
        border-radius:3px;
        font-size:20px;
        padding:6px 12px;
    }
</style>
<div id="app" class="flex-box">
    <ul id="showTime" class="flex-box-rcc"></ul>

</div>
<div id="btn-start" class="btn">开始</div>
<div id="btn-stop" class="btn">暂停</div>
<div id="btn-reset" class="btn">重置</div>
<input type="text" min="0"  id="input-min" >
<input type="text" min="0" max="59" id="input-sec"/>

<script>

    let showTime = document.getElementById('showTime')
    let btnSart = document.getElementById('btn-start')
    let btnStop = document.getElementById('btn-stop')
    let btnReset = document.getElementById('btn-reset')
    let inputMin = document.getElementById('input-min')
    let inputSec = document.getElementById('input-sec')

let min = 1
let sec = 0
let timer  = null
let timerEn = false

inputMin.value = min
inputSec.value = sec

//续触发事件时，保证一定时间段内只调用一次事件处理函数。计算精确的一秒钟
function delayOneSecond(fn){
        // 利用闭包保存时间
        let last = +new Date()
        return (..._args)=> {
            let args = _args
            let now = +new Date()
            if (now - last >= 1000) {
                fn.apply(this, args)
                last = +new Date()
            }
        }
}

//处理计数值
function handle(){
        if(min <= 0 && sec <= 0){
            clearInterval(timer)
            min =0
            sec = 0
            return
        }
        sec--
        if(sec<0){
            sec=59
            min--
        }
}

//显示数据
function show(){
       showTime.innerHTML =
            "<li>"+min+":</li>"+
           "<li>"+sec+"</li>"
}

//一秒钟计数一次

    let countOnceSecond =(()=>{

            return delayOneSecond(()=>{
                handle()
                show()
            })

    })()



//初始化
function init(){
    timer = setInterval(function(){
        if(timerEn){

            countOnceSecond()
        }
    }, 50);
    show()
}

    //初始化执行
    init()


    //处理输入的min字符，保证是合法的数字
    inputMin.onchange=function(){
        if(inputMin.value === '' || inputMin.value < 0){
            inputMin.value = 0
        }
        inputMin.value =  parseInt(inputMin.value)
    }
    //处理输入的min字符，保证是合法的数字
    inputSec.onchange=function(){
        if(inputSec.value === '' || inputSec.value < 0 ){
            inputSec.value = 0
        }
        if(inputSec.value >59){
            alert('不能大于59')
            inputSec.value = 59
        }
        inputSec.value = parseInt(inputSec.value)
    }

    //暂停
    btnStop.onclick = function(){
       // clearInterval(timer)
        timerEn = false
    }
    //开始
    btnSart.onclick=function(){
      //  timer = setInterval(countOnceSecond, 50);
        timerEn = true

    }
    //按下空格键
    document.onkeydown = function (e) {
   // 兼容FF和IE和Opera
        let theEvent = window.event || e;
        let code = theEvent.keyCode || theEvent.which || theEvent.charCode;


        if (code === 32) {
            timerEn === true? timerEn=false:timerEn=true
        }

    }
    //重置
    btnReset.onclick=function(){
        if(inputMin.value === ''){
            inputMin.value = 0
        }
        clearInterval(timer)
        timerEn = 1
        min= parseInt(inputMin.value)
        sec = parseInt(inputSec.value)
        show()
    }


</script>
</body>

</html>